<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dashboard</title>
  <!-- build:css ../../static/css/index.css -->
  <link href="../../resources/contextMenu/jquery.contextMenu.min.css" rel="stylesheet">
  <link href="../../resources/layui/css/layui.css" rel="stylesheet">
  <link href="../../resources/css/iconfont.css" rel="stylesheet">
  <link href="../../resources/css/bundle.css" rel="stylesheet">
  <!-- endbuild -->
</head>
<body>

<div class="layui-fluid">
  <div class="layout-fluid-header">
    <div class="nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">基础表单</a>
      </span>
    </div>
    <h1>
      分步表单
    </h1>
    <p>将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
    </p>

  </div>
  <div class="layout-fluid-container">
    <div class="layout-wrapper">
      <div class="layout-steps">
        <div class="layout-steps-item">
          <div class="layout-steps-item-icon"><span class="layout-steps-icon">1</span></div>
          <div class="layout-steps-item-content">
            <div class="layout-steps-item-title">Finished</div>
            <div class="layout-steps-item-description">This is a description.</div>
          </div>
        </div>
        <div class="layout-steps-item">
          <div class="layout-steps-item-icon"><span class="layout-steps-icon">2</span></div>
          <div class="layout-steps-item-content">
            <div class="layout-steps-item-title">In Progress</div>
            <div class="layout-steps-item-description">This is a description.</div>
          </div>
        </div>
        <div class="layout-steps-item">
          <div class="layout-steps-item-icon"><span class="layout-steps-icon">3</span></div>
          <div class="layout-steps-item-content">
            <div class="layout-steps-item-title">Waiting</div>
            <div class="layout-steps-item-description">This is a description.</div>
          </div>
        </div>
      </div>
      <div class="layout-steps-from">
        <div class="layui-form" id="step_form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
          <div class="layout-steps-form-item">
            <div class="layui-form-item">
              <label class="layui-form-label">手机号</label>
              <div class="layui-input-block">
                <input type="tel" name="" placeholder="请输入" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">密码</label>
              <div class="layui-input-block">
                <input name="" placeholder="请输入" type="password" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" onclick="steps.next()">提交</button>
              </div>
            </div>
          </div>
          <div class="layout-steps-form-item">
            <div class="layui-form-item">
              <label class="layui-form-label">验证码</label>
              <div class="layui-input-block">
                <input type="number" name="" placeholder="请输入" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" onclick="steps.prev()">上一步</button>
                <button class="layui-btn" onclick="steps.next()">提交</button>
              </div>
            </div>
          </div>
          <div class="layout-steps-form-item">
            <div class="layout-result success">
              <div class="layout-result-title">
                <div class="layout-result-icon">
                  <i class="anticon icon-checkcircle"></i>
                </div>
                <h2>提交成功</h2>
                <div class="layout-result-description">
                  提交结果页用于反馈一系列操作任务的处理结果。
                </div>
              </div>
              <div class="layout-result-content">
                <blockquote class="layui-elem-quote">
                  <h3 class="layout-result-content-title">黑卡办理手续</h3>
                  <p class="gray">项目 ID：23421</p>
                  <p class="gray">负责人：曲丽丽</p>
                  <p class="gray">生效时间：2016-12-12 ~ 2017-12-12</p>
                </blockquote>
              </div>
              <div class="layout-result-footer">
                <button class="layui-btn layui-btn-normal" onclick="steps.prev(2)">再来一次</button>
              </div>
            </div>
          </div>
          <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
        </div>
      </div>
    </div>
  </div>
</div>

<!-- build:js ../../static/js/main.js -->
<script src="../../resources/jquery/jquery.min.js"></script>
<script src="../../resources/contextMenu/jquery.contextMenu.min.js"></script>
<script src="../../resources/layui/layui.all.js"></script>
<!-- endbuild -->
<!-- build:js ../../static/js/step_bundle.js -->
<script src="../../resources/js/bundle.js"></script>
<!-- endbuild -->
<script>

  var steps = new Steps(document.querySelector('.layout-steps'), document.getElementById('step_form'))
</script>
</body>
</html>
